<template>
  <ChartContainer :option="option" />
</template>

<script>
import ChartContainer from './ChartContainer.vue';

export default defineComponent({
  name: 'PieChart',
  components: { ChartContainer },
  props: {
    data: {
      type: Array,
      required: true
    },
    title: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const option = computed(() => {
      return {
        title: {
          text: props.title,
          left: 'right',
          textStyle: {
            color: '#fff',
            fontSize: 10
          }
        },
        legend: {
          left: 'left',
          orient: 'vertical',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['15%', '70%'],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: props.data,
            label: {
              formatter: '{c}%'
            }
          }
        ],
        tooltip: {
          trigger: 'item'
        }
      };
    });

    return {
      option
    };
  }
});
</script>
